<template>
	<view class="shopDetails">
		<view class="carousel_box"><Carousel :val="bannerObj" :autoplay="false"></Carousel></view>
		<view class="content">
			<view class="goods_info_box">
				<view class="fn-sz-30 fn-cl-333333 mar-bottom-10">{{ tourDetails.name }}</view>
				<view class="goods_info_bottom_box">
					<view class="inner_goods_left_info_box">
						<view class="fn-sz-26 fn-cl-FF5B25 mar-right-40">
							<span class="mar-right-8">评分：</span>
							<span>{{ tourDetails.avg_score }}分</span>
						</view>
						<view class="fn-sz-24 fn-cl-666666">
							<span class="mar-right-4">累计销售:</span>
							<span>{{ tourDetails.sale_num }}</span>
						</view>
					</view>
					<view class="inner_goods_right_info_box" @tap="goLinkComment">
						<view class="fn-sz-24 fn-cl-666666">{{ tourDetails.comment_num }}条评论</view>
						<image src="../../static/images/icon/icon_moer_btn.png" class="icon-28" mode=""></image>
					</view>
				</view>
			</view>
			<view class="area-title">规格选择</view>
			<view class="travel_group_list">
				<view class="travel_group_item" v-for="(item, index) in tourDetails.option" :key="index">
					<view class="travel_group_top_box">
						<view class="travel_group_left_info">
							<view class="fn-sz-30 fn-cl-333333 mar-bottom-18">{{ item.option_name }}</view>
							<view class="travel_group_price_box">
								<view class="now_pirce fn-cl-F34035 mar-right-20">
									<span class="fn-sz-22">￥</span>
									<span class="fn-sz-36">{{ item.price }}</span>
								</view>
								<view class="sale_num">
									<span class="fn-sz-24 fn-cl-666666">已售:{{ item.sale_num }}</span>
								</view>
							</view>
						</view>
						<view class="travel_group_right_buybtn"><button @tap="bookIn(item)">预定</button></view>
					</view>
					<view class="travel_group_bottom_info_box">
						<view class="explain_btn" @tap="optionsDescription(item)">
							<span class="fn-sz-24 fn-cl-666666 mar-right-10">套餐说明</span>
							<image src="../../static/images/icon/icon_moer_btn.png" class="icon-30" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="buy_need_know_box">
				<view class="fn-sz-30 fn-cl-222222 mar-bottom-18">购买须知</view>
				<view class="buy_need_know_text">{{ tourDetails.agreement }}</view>
			</view>
			<view class="goods_content_box">
				<view class="goods_tab">
					<view :class="['goods_tab_item', curTabs == 0 ? 'active_item' : '']" @tap="changeCurTab(0)">商品详情</view>
					<view :class="['goods_tab_item', curTabs == 1 ? 'active_item' : '']" @tap="changeCurTab(1)">用户评价</view>
				</view>
				<view class="goods_content_img" v-show="curTabs == 0"><u-parse :content="tourDetails.content_text"></u-parse></view>
				<view class="rate_list_box" v-show="curTabs == 1">
					<view class="rate_item" v-for="(item, index) in comment_list" :key="index"><EvaluationCom :itemData="item"></EvaluationCom></view>
					<view class="check_all_comment" @tap="goLinkComment">
						<span class="mar-right-8">查看全部评价</span>
						<image class="icon-26" src="../../static/images/icon/icon_moer_btn_orange.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="correlation_recommend">
				<view class="fn-sz-32 fn-cl-333333 mar-bottom-30">相关推荐</view>
				<view class="recommend_goods_list"><TourList :list="recommend"></TourList></view>
			</view>
		</view>

		<view class="bottom_op_box"><button class="contact_service_btn" @tap="contactService">联系客服</button></view>

		<!-- 套餐说明 -->
		<u-popup :show="optionsDescShow" mode="bottom" @close="optionsDescClose" :round="10">
			<view class="optionsDescModel">
				<view class="optionsDescModel_inner_top">
					<view></view>
					<view class="fn-sz-34 fn-cl-333333">套餐说明</view>
					<image class="icon-30" @tap="optionsDescShow = false" src="../../static/images/icon/icon_gary_radios_fill.png" mode=""></image>
				</view>
				<view class="desc_box_text">
					<span class="fn-sz-28 fn-cl-666666">{{ curOptionsDesc }}</span>
				</view>
			</view>
		</u-popup>
		<!-- 选择规格 -->
		<u-popup :show="skuShow" mode="bottom" @close="skuClose" :round="10">
			<view class="skuModel">
				<view class="skuModel_inner_top">
					<view class="fn-sz-24 fn-cl-333333">已选规格</view>
					<image @tap="skuClose" class="icon-30" src="../../static/images/icon/icon_gary_radios_fill.png" mode=""></image>
				</view>
				<view class="sku_big_num_box">
					<view class="sku_big_num_box_title">{{ curBookInOptions.option_name }}</view>
					<view class="sku_num_box">
						<span class="fn-sz-22 fn-cl-F34035">￥</span>
						<span class="fn-sz-30 fn-cl-F34035">{{ curBookInOptions.price }}</span>
						<view class="btn_box">
							<image class="icon-40" src="../../static/images/icon/icon_del_btn.png" mode="" @tap="countFunc(false)"></image>
							<view class="num_box">{{ buyNum }}</view>
							<image class="icon-40" src="../../static/images/icon/icon_add_btn.png" mode="" @tap="countFunc(true)"></image>
						</view>
					</view>
				</view>
				<view class="sku_inner_row_box">
					<view class="sku_inner_row_title">联系人</view>
					<view class="sku_inner_input_box"><input v-model="tourSubmitObj.contact" type="text" placeholder="请输入联系人姓名" /></view>
				</view>
				<view class="sku_inner_row_box">
					<view class="sku_inner_row_title">联系电话</view>
					<view class="sku_inner_input_box"><input v-model="tourSubmitObj.telphone" type="text" placeholder="请输入联系电话" /></view>
				</view>
				<view class="sku_inner_row_box">
					<view class="sku_inner_row_title">地址</view>
					<view class="sku_inner_input_box"><input v-model="tourSubmitObj.address" type="text" placeholder="请输入地址" /></view>
				</view>
				<view class="sku_bottom_box">
					<view class="sku_bottom_left_box">
						<span class="fn-sz-26 mar-right-10">合计:</span>
						<span class="fn-sz-22 fn-cl-F34035">￥</span>
						<span class="fn-sz-30 fn-cl-F34035">{{ curBookInOptions.price * buyNum }}</span>
					</view>
					<view class="sku_bottom_right_box" @tap="submitCreateOrder">立即结算</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import Carousel from '../../components/carousel/Carousel.vue';
import Rate from '../../components/rate/rate.vue';
import EvaluationCom from '../../components/EvaluationCom/EvaluationCom.vue';
import com from '../../mixin/index.js';
import TourList from '../../components/tourList.vue';
import share from '../../common/js/share.mixin.js';
export default {
	mixins: [com, share],
	components: {
		Carousel,
		Rate,
		EvaluationCom,
		TourList
	},
	data() {
		return {
			bannerObj: {
				list: [],
				height: '420rpx',
				radius: '0rpx'
			},
			tourList: {
				lists: [],
				total: 1,
				total_page: 0
			},
			page: {
				page: 1,
				page_size: 12
			},
			curTabs: 0,
			optionsDescShow: false,
			skuShow: false,
			tour_id: '',
			recommend: [],
			tourDetails: {},
			curOptionsDesc: '',
			comment_list: [],
			buyNum: 1, //购买数量
			curBookInOptions: {},
			tourSubmitObj: {
				contact: '',
				telphone: '',
				address: ''
			},
			share: {
				title: '',
				path: '',
				imageUrl: '',
				desc: ''
			}
		};
	},
	onLoad(val) {
		console.log(val, '获取商品id');
		if (val.tour_id) {
			this.tour_id = val.tour_id;
			this.share.path = `/pages/travel/travelDetails?tour_id=${val.tour_id}`;
			if (val.p_mid) {
				uni.setStorageSync('p_mid', val.p_mid);
			}
			this.getDetails();
			this.getTourComment();
		}
	},
	methods: {
		//关闭优惠券模态框
		optionsDescClose() {
			console.log('关闭咯');
			this.optionsDescShow = false;
		},
		skuClose() {
			this.skuShow = false;
			this.buyNum = 1;
			this.tourSubmitObj = {
				contact: '',
				telphone: '',
				address: ''
			};
		},
		//联系客服
		contactService() {
			this.$api.getServiceTel().then(res => {
				if (res.code == 1) {
					uni.makePhoneCall({
						phoneNumber: res.data.tel //仅为示例
					});
				}
			});
		},
		submitCreateOrder() {
			this.$api.createTourOrder({ tour_id: this.tour_id, option_id: this.curBookInOptions.id, num: this.buyNum, ...this.tourSubmitObj }).then(res => {
				console.log(res, '景区下单结果');
				this.$helper.toast(res.msg);
				if (res.code == 1) {
					uni.navigateTo({
						url: `/pages/orderPay/tourOrderPay?order_id=${res.data.order_id}`
					});
				}
			});
		},
		//开启
		optionsDescOpen() {
			console.log('开启咯');
			this.optionsDescShow = true;
		},
		optionsDescription(item) {
			this.optionsDescOpen();
			this.curOptionsDesc = item.desc;
		},
		changeCurTab(val) {
			this.curTabs = val;
		},
		goLinkComment() {
			uni.navigateTo({
				url: `/pages/shop/allComment?tour_id=${this.tour_id}`
			});
		},
		getDetails() {
			this.$api.getTourDetail({ tour_id: this.tour_id }).then(res => {
				if (res.code != 1) {
					this.$helper.toast(res.msg);
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
				console.log(res, '获取商品详情');
				this.tourDetails = res.data;
				this.share.imageUrl = this.tourDetails.images[0];
				this.share.title = this.tourDetails.name;
				// const { product, recommend, ticket } = res.data;
				// this.product = product;
				this.recommend = res.data.recommend;
				var bannerList = [];
				if (this.tourDetails.video.length) {
					bannerList = [{ image: this.tourDetails.video }, ...this.tourDetails.images];
				} else {
					bannerList = [...this.tourDetails.images];
				}
				this.bannerObj.list = bannerList;
			});
		},
		getTourList() {
			this.getList('tourList', 'getTourList', 'page', { ...this.page });
		},
		getTourComment() {
			this.$api.getTourComment({ page: 1, page_size: 3, tour_id: this.tour_id }).then(res => {
				console.log(res, '商品评价0');
				this.comment_list = res.data.lists;
			});
		},
		countFunc(num) {
			if (num) {
				this.buyNum += 1;
			} else {
				if (this.buyNum > 1) {
					this.buyNum -= 1;
				}
			}
		},
		bookIn(item) {
			this.curBookInOptions = item;
			this.skuShow = true;
		}
	}
};
</script>

<style lang="scss">
.shopDetails {
	background-color: #f9f9f9;
	padding-bottom: 120rpx;
	.top_box {
		padding: 20rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.carousel_box {
		margin-bottom: 20rpx;
	}
	.content {
		padding: 0 24rpx;
	}
	.goods_info_box {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 24rpx 22rpx;
		margin-bottom: 40rpx;
		view {
			&:nth-child(1) {
				line-height: 44rpx;
			}
		}
		.goods_info_bottom_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.inner_goods_left_info_box,
			.inner_goods_right_info_box {
				display: flex;
				align-items: center;
			}
		}
	}
	.travel_group_list {
		.travel_group_item {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 24rpx 22rpx;
			margin-bottom: 20rpx;
			.travel_group_top_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;
				.travel_group_left_info {
					.travel_group_price_box {
						display: flex;
						align-items: center;
						.now_pirce {
						}
						.sale_num {
						}
					}
				}
				.travel_group_right_buybtn {
					button {
						width: 130rpx;
						height: 70rpx;
						background: #fed100;
						border-radius: 40rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #333333;
						line-height: 70rpx;
					}
				}
			}
			.travel_group_bottom_info_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 14rpx;
				.explain_btn {
					display: flex;
					align-items: center;
				}
				.buy_need_know_btn {
					text-decoration: underline;
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}
	.buy_need_know_box {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 24rpx 22rpx;
		margin-bottom: 40rpx;
		.buy_need_know_text {
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			line-height: 40rpx;
		}
	}
	.goods_content_box {
		.goods_tab {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			.goods_tab_item {
				margin-right: 60rpx;
			}
			.active_item {
				font-weight: bold;
				position: relative;
				&::after {
					content: '';
					position: absolute;
					bottom: -12rpx;
					left: 0;
					right: 0;
					margin: 0 auto;
					width: 48rpx;
					height: 8rpx;
					background: #fed100;
					border-radius: 5rpx;
				}
			}
		}
		.goods_content_img {
			overflow: hidden;
			border-radius: 10rpx;
			margin-bottom: 28rpx;
		}
		.rate_list_box {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 33rpx 26rpx;
			margin-bottom: 42rpx;
			.rate_item {
				margin-bottom: 40rpx;
			}
			.check_all_comment {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #f34035;
				font-size: 28rpx;
				line-height: 26rpx;
			}
		}
	}
	.correlation_recommend {
		margin-bottom: 300rpx;
		.recommend_goods_list {
		}
	}
	.bottom_op_box {
		display: flex;
		width: 100vw;
		align-items: center;
		background: #ffffff;
		justify-content: space-between;
		padding: 19rpx 23rpx;
		position: fixed;
		box-sizing: border-box;
		bottom: 0;

		.contact_service_btn {
			width: 100%;
			height: 80rpx;
			background: #fed100;
			border-radius: 40rpx;
			font-size: 30rpx;
		}
	}
	.optionsDescModel {
		background: #ffffff;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 30rpx 20rpx;
		min-height: 40vh;
		.optionsDescModel_inner_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 25rpx;
		}
	}
	.skuModel {
		padding: 24rpx;
		.skuModel_inner_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}
		.sku_big_num_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 40rpx;
			margin-bottom: 50rpx;
			.sku_big_num_box_title {
				font-size: 28rpx;
				color: #333;
				line-height: 40rpx;
			}
			.sku_num_box {
				display: flex;
				align-items: center;
				.btn_box {
					display: flex;
					align-items: center;
					margin-left: 30rpx;
					.num_box {
						width: 40rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
					}
				}
			}
		}
		.sku_inner_row_box {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.sku_inner_row_title {
				width: 140rpx;
				flex: none;
				font-size: 28rpx;
				color: #333;
			}
			.sku_inner_input_box {
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				background-color: #f9f9f9;
				border-radius: 6rpx;
				padding: 15rpx 25rpx;
				input {
					color: #999999;
					font-size: 28rpx;
				}
			}
		}
		.sku_bottom_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.sku_bottom_left_box {
			}
			.sku_bottom_right_box {
				background: #fed100;
				text-align: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				border-radius: 45rpx;
				padding: 16rpx 30rpx;
			}
		}
	}
}
</style>
